<template>
  <div class="member-detail">
    <div class="state">
      <p><span class="iconfont icon-order-unpay"></span></p>
      <p>{{ orderStatus[order.orderState].label }}</p>
    </div>

    <div class="info">
      <p>订单编号：{{ order.id }}</p>
      <p>下单时间：{{ order.createTime }}</p>
    </div>

    <!-- 给XtxButton外面套一层div盒子, 这样就解决了XtxButton宽度被拉伸问题 -->
    <div class="btn">

      <!--
          1.待付款：立即付款，取消订单
          2.待发货：再次购买
          3.待收货：确认收货，再次购买
          4.待评价：评价商品，再次购买，申请售后
          5.已完成：查看评价，再次购买，申请售后
          6.已取消：-
      -->

      <!-- 待付款 -->
      <template v-if="order.orderState === 1">
        <XtxButton size="small"
                   type="primary"
                   @click="$router.push(`/member/pay?orderId=${order.id}`)">立即付款
        </XtxButton>
        <XtxButton size="small"
                   type="gray"
                   @click="handlerCancel(order)">取消订单
        </XtxButton>
      </template>
      <!-- 待发货 -->
      <template v-if="order.orderState === 2">
        <XtxButton size="small"
                   type="primary"
                   @click="$router.push(`/member/checkout?orderId=${order.id}`)">再次购买
        </XtxButton>
      </template>
      <!-- 待收货 -->
      <template v-if="order.orderState === 3">
        <XtxButton size="small"
                   type="primary"
                   @click="handlerConfirm(order)">确认收货
        </XtxButton>
        <XtxButton size="small"
                   type="primary"
                   @click="$router.push(`/member/checkout?orderId=${order.id}`)">再次购买
        </XtxButton>
      </template>
      <!-- 待评价 -->
      <template v-if="order.orderState === 4">
        <XtxButton size="small"
                   type="primary"
                   @click="$router.push(`/member/checkout?orderId=${order.id}`)">再次购买
        </XtxButton>
        <XtxButton size="small" type="plain">评价商品</XtxButton>
        <XtxButton size="small" type="gray">申请售后</XtxButton>
      </template>
      <!-- 已完成 -->
      <template v-if="order.orderState === 5">
        <XtxButton size="small"
                   type="primary"
                   @click="$router.push(`/member/checkout?orderId=${order.id}`)">再次购买
        </XtxButton>
        <XtxButton size="small" type="plain">查看评价</XtxButton>
        <XtxButton size="small" type="gray">申请售后</XtxButton>
      </template>
      <!-- 已取消 -->
    </div>

    <!-- Teleport组件的作用 -->
    <!--<Teleport to="#model">-->
    <OrderCancel ref="orderCancelRef"></OrderCancel>
    <!--</Teleport>-->
  </div>
</template>

<script>
import { orderStatus } from '@/constant'
import { ref } from 'vue'
import OrderCancel from '@/components/member/OrderCancel'
import { useCancel, useConfirm } from '@/components/member/useOrderAction'

export default {
  name: 'DetailAction',
  components: {
    OrderCancel,
  },
  props: {
    order: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    // 取消订单组件的ref
    const orderCancelRef = ref(null)

    // 取消订单
    const { handlerCancel } = useCancel(orderCancelRef)

    // 确认收货
    const { handlerConfirm } = useConfirm()

    return {
      orderStatus,
      orderCancelRef,
      handlerConfirm,
      handlerCancel
    }
  }
}
</script>

<style lang="less" scoped>
.member-detail {
  display: flex;
  align-items: center;
  height: 180px;
  width: 100%;

  .state {
    width: 220px;
    text-align: center;

    p {
      &:first-child {
        span {
          color: @xtxColor;
          font-size: 40px;
        }
      }

      &:last-child {
        margin-bottom: 10px;
        color: #666;
        font-size: 16px;
      }
    }
  }

  .info {
    width: 240px;
    color: #999;
    font-size: 14px;

    p {
      line-height: 30px;
    }
  }

  .btn {
    flex: 1;
    margin-right: 100px;
    text-align: right;

    .xtx-button {
      margin-left: 20px;
    }
  }
}
</style>
